<template>
  <div style="margin-top: 20px; text-align: left;">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {

  },
  methods: {
    // 按照分页显示数据的函数
    getAccountListByPage() {
      // 收集当前页码 和 每页显示条数
      const formData = this.formInline;
      formData.page = this.currentPage
      formData.size = this.pageSize
      // 发送ajax请求 把分页数据发送给后端
      getBookPageData(formData).then(response => {
        console.log("对应页码的数据:", response);
        // 赋值给对应的变量即可
        this.total = response.total;
        this.myDatas = response.content;
        // 如果当前页没有数据 且 排除第一页
        if (!response.content.length && this.currentPage !== 1) {
          // 页码减去 1
          this.currentPage -= 1;
          // 再调用自己
          this.getAccountListByPage();
        }
      })
          .catch(err => {
            console.log(err);
          });
    },
    // 每页显示条数改变 就会触发这个函数
    handleSizeChange(val) {
      // 保存每页显示的条数
      this.pageSize = val;
      // 调用分页函数
      this.getAccountListByPage();
    },
    // 当前页码改变 就会触发这个函数
    handleCurrentChange(val) {
      // 保存当前页码
      this.currentPage = val;
      // 调用分页函数
      this.getAccountListByPage();
    },
  }
}
</script>